@import './main.less';

* {
  font-family: "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", "PingFang SC";
  margin:0;
  padding:0;
}
//总体布局
.content-box{
  max-width: @maxWidth;
  min-width: @minWidth;
  padding: 0 60px;
  margin: 30px auto 40px;
  overflow: hidden;
}
//图片预览弹框样式
.show-image-dialog {
  width: 85%;
  height: 85%;
  background: none;
  box-shadow: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .el-dialog__header {
    padding: 0;
    border-bottom: 0;
    position: relative;
    i {
      font-size: 18px;
      line-height: 30px;
    }
  }
  .el-dialog__headerbtn {
    width: 30px;
    height: 30px;
    line-height: 32px;
    text-align: center;
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: #fff;
    z-index: 3000;
    border-radius: 50%;
    &:hover {
      i {
        color: @primaryColor;
      }
    }
  }
  .el-dialog__body {
    padding: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: relative;
    img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.operationIconStyle{
  font-size:18px;
  margin-left:20px;
  padding:10px;
  color:#b6c2c9;
  cursor: pointer;
  &:hover{
    color:@primaryColor;
  }
}
//el-popover组件样式调整
.MkPopover_tip[x-placement^="bottom"] .popper__arrow::after{
  border-bottom-color: @menuBackColor1!important;
}
.MkPopover_tip[x-placement^="top"] .popper__arrow::after{
  border-top-color: @menuBackColor1!important;
}
.MkPopover_tip[x-placement^="left"] .popper__arrow::after{
  border-left-color: @menuBackColor1!important;
}
.MkPopover_tip[x-placement^="right"] .popper__arrow::after{
  border-right-color: @menuBackColor1!important;
}
//.el-upload-list--picture-card li .progressbar .el-progress-circle svg{
//  color:red;
//  background:red;
//}
//导出按钮
.export-btn {
  display: inline-block;
  width: 120px;
  height: 46px;
  line-height: 46px;
  font-size: 14px;
  text-align: center;
  background-color: @creatButton;
  .my-border-radius(4px);
  color: #fff;
  text-decoration: none;
  &:hover {
    cursor: pointer;
    .my-opacity;
  }
}
.MkPopover_tip{
  .my-border-radius(5px);
  line-height: 40px !important;
  min-width:120px;
  padding:15px 0;
  color:#fff;
  background-color:#1f3a3d;
  .tipBtn{
    padding-left:20px;
    &:hover{
      background-color:@primaryColor;
      cursor:pointer;
    }
  }
}
//浮框提示按钮功能信息
.defined_tip{
  min-width: 0!important;
  padding:0 10px !important;
  line-height: 35px !important;
}
//表单控件到label样式
.el-form-item__label{
  padding-right:20px;
  color: @fontColorThree;
}
//类似考勤到tabs样式
.globalTabsStyle{
  .el-tabs__header{
    margin-bottom:10px;
    .el-tabs__nav-wrap{
      height:80px;
      background:#fff;
      .el-tabs__nav-scroll{
        border-top:1px solid @borderColor;
        padding-top:20px;
        .el-tabs__nav{
          margin-left:40px;
          .el-tabs__item{
            //padding: 0 16px;
            height: 60px;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            line-height: 60px;
            display: inline-block;
            list-style: none;
            font-size: 16px;
            color: #506470;
            //width:96px;
            position: relative;
          }
          .el-tabs__active-bar{
            height:4px;
            //width:96px!important;
          }
          .el-tabs__item.is-top:last-child{
            padding-right:0;
          }
          .el-tabs__item:nth-child(1){
            padding-left:0px;
          }
          //    .el-tabs__item:nth-child(1){
          //      padding-left:8px;
          //    }
          //    .el-tabs__item:nth-last-child(1){
          //      padding-right:8px;
          //    }
        }
      }

    }
  }

}
//类似工单到tabs样式
.globalTabsStyle_1.el-tabs--card{
  &>.el-tabs__header{
    border:none;
    margin:0;
  }
  &>.el-tabs__header .el-tabs__nav{
    border:none;
  }
  &>.el-tabs__header .el-tabs__item{
    margin-right:10px;
    height: 40px;
    line-height: 40px;
    background-color: #b6c2c9;
    color: #fff;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 0;
    float: left;
  }
  &>.el-tabs__header .el-tabs__item.is-active{
    height: 55px;
    line-height: 55px;
    background-color: #fff;
    color: #506470;
    border: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
  }
}
//树型结构样式
.el-tree-node__content{
    line-height: 36px;
    height:36px;
    [class*=" el-icon-"]{
      font-size:24px;
    }
    &:hover{
      background-color:@hoverGreenColor;
    }
  }
//侧滑头部的操作按钮
.operationBtnInRightDialog{
  position: absolute;
  top:30px;
  right:60px;
  .infoIcon{
    padding:5px 15px;
    cursor: pointer;
    color:#81939e;
    &:hover{
      color:@primaryColor;
    }
  }
}

//360中placeholder属性没有竖直居中
input{
  line-height:normal !important;
}
//带滚动条的侧滑 --添加
.el-dialog.dialogScroll_add{
  .el-dialog__body{
    padding-right:20px;
    .el-form{
      width:95%;
    }
  }
}
//带滚动条的侧滑--详情
.el-dialog.dialogScroll_detail{
  .el-dialog__body{
    padding-right:20px;
    .contentDiv{
      width:96%;
    }
  }
}
//联动下拉
.el-cascader{
  width:100%;
}
//提交表单遮罩颜色
.el-loading-mask.is-fullscreen{
  background-color:rgba(0,0,0,.4);
}
/*表格加载时的图标*/
.el-loading-mask{
  z-index: 100;
}
/*后面带可点击图标的输入框*/
.el-button .fa-user,.el-button .fa-home {
  font-size: 18px;
  position:absolute;
  top:10px;
  right:11px;
  color: @grayButton;
}
/*文本框鼠标手势*/
.inputHasCursor .el-input__inner{
  cursor:pointer;
}
/*表格没有数据时，样式调整*/
.el-table__empty-block{
  min-height: 400px;
}
//联动选择器，出现滚动条时样式调整
.el-cascader-menu::-webkit-scrollbar{
  width:5px !important;
  height:5px !important;
}
.el-cascader-menu::-webkit-scrollbar-track{
  background:@menuBackColor1;
}
.el-cascader-menu::-webkit-scrollbar-thumb{
  background:rgba(151, 184, 190, 0.5);
  .my-border-radius(10px)
}
//去掉验证表单前面的红色
.el-form-item.is-required .el-form-item__label:before{
  content: '';
}
//表格中出现的操作图标
.opationIconInTable{
  color:#c6cdd2;
  cursor: pointer;
  padding:15px;
  &:hover{
    color:@primaryColor;
  }
}
//分页栏样式
.el-pagination{ /*分页*/
  padding-top:20px;
  text-align: right;
  background-color:#fff;
  border-top:1px solid @borderColor;
  padding-bottom:20px;
}
.fontColorOne{
  color:@fontColorOne;
}
.fontColorThree{
  color:@fontColorThree;
}
.fontColorTwo{
  color:@fontColorTwo;
}
.marginBottom-20{
  margin-bottom:20px;
}
.cursorPointer{
  cursor:pointer;
  &:hover{
    .my-opacity();
  }
}
.floatRight{
  float: right;
}
.floatLeft{
  float:left;
}
.clearFloat{
  clear:both;
}
.textAlignRight{
  text-align: right;
}
.textAlignCenter{
  text-align:center;
}
.tabContainer{
  padding:0 30px;
  background:#fff;
}

//表格中，行悬浮鼠标样式
.trHasCursor{
  .el-table{
    .el-table__body{
      tr{
        cursor:pointer;
      }
    }
  }
}
.PublicListStyle{
  margin:30px auto 40px;
  padding:0 60px;
  min-width: @minWidth;
  max-width: @maxWidth;
  .onfousInput{
    .my-placeholder-color();
    margin-top:-20px;
    .onfocusInputContent{
      background:#fff;
      padding:20px 20px 30px;
      position:relative;
      .searchByCondition{
        color:@fontColorThree;
        margin-top:30px;
        margin-left:30px;
        .el-input__inner{
          background:@borderColor;
        }
        .el-input__icon{
          color:@fontColorThree;
        }
      }
      .closeSearch{
        float:right;
        color:@fontColorThree;
        margin-right:10px;
        margin-top:10px;
        cursor:pointer;
        &:hover{
          .my-opacity();
        }
      }
      .searchCustomer,.resetCustomer{
        float:right;
      }
      .resetCustomer{
        margin-right:200px;
        margin-left:30px;
      }

      .lineStyle{
        height:0;
        border-bottom:1px solid @borderColor;
        margin-top:15px;
        margin-right:200px;

      }
      .searchInput1{
        margin-left:20px;
        width:500px;
        padding-top: 5px;
        padding-bottom:5px;
        .el-input__inner{
          background-color:#fff;
        }
      }
      .searchBtn1{
        position:absolute;
        z-index:100;
        left:15px;
        top:35px;
        font-size:20px;
        /*       color:@fontColorOne;*/
        .my-opacity(0.7);
      }
      .conditionBtn{
        font-size:14px;
        padding-left:30px;
        color:@fontColorThree;
        margin-top:20px;
      }
    }
  }
  .layoutStyle{
    padding:20px;
    background-color: #fff;
    height: 755px;
    &.layoutStyle_left{
      overflow: auto;
      padding-right:0;
      border-right:1px solid @borderColor;
    }
  }

  .searchDiv{
    position:relative;
    .searchBtn{
      position:absolute;
      top:15px;
      font-size:20px;
      left:15px;
      .my-opacity(0.7);
      z-index:100;
    }
    .moreBtn{
      width:46px;
      height:46px;
      background-color: #fff;
      text-align: center;
      line-height: 46px;
      border-radius: 5px;
      float: right;
      margin-left:20px;
      color:#c6cdd2;
      cursor: pointer;
    }
    .searchInput{
      width:500px;
      padding-top: 5px;
      padding-bottom:5px;
      background-color: #fff;
      .my-border-radius(5px);
      padding-left:40px;
      .el-input__inner{
        background-color:#fff;
      }
      .my-placeholder-color();
    }
  }
}

.PublicDetailStyle{
  .basicInfo{
    background-color:rgba(247,186,41,0.1);
    padding-top:20px;
    padding-bottom:20px;
    margin-bottom:20px;
    .basicInfo_{
      padding-left: 30px;
      margin-bottom: 20px;
      margin-top: 20px;
      .threeInfo{
        margin-bottom: 10px;
        .name{
          font-size:20px;
          font-weight: bold;
        }
        .maritalStatus,.diploma{
          display: inline-block;
        }
        .maritalStatus{
          margin-left:180px;
        }
        .diploma{
          margin-left: 30px;
        }
      }
    }
  }
  .infoName,.infoValue{
    line-height: 35px;
    word-wrap: break-word;
  }
  .infoName{
    text-align: right;
    color:@fontColorThree;
  }
  .infoValue{
    padding-left:30px;
    color:@fontColorTwo;
    .el-tag{
      border:none;
      height:24px;
      line-height: 24px;
      background: rgba(59,192,195,0.2);
      color:@primaryColor;
      margin-right:10px;
    }
  }
  .houseDiv{
    border-top:1px solid @borderColor;
    padding-top:30px;
    margin-top:20px;
    .houseInfo{
      margin-top:10px;
      .houseNumber{
        display:inline-block;
        padding-left: 10px;
        width:80px;
        border-left:2px solid @primaryColor;
        margin-top: 15px;
      }
      .houseValue{
        display: inline-block;
      }
      .width-120{
        width:120px;
      }
      .width-80{
        width:80px;
      }
      .showDetail{
        float:right;
        margin-top: 14px;
        color:@fontColorThree;
        cursor:pointer;
        &:hover{
          .my-opacity();
        }
      }
    }
  }
}

.el-dialog__headerbtn {
  border: none;
  background: none;
  outline: none;
}
.el-message-box__close {
  position: static;
  font-size: 16px;
}
.el-message-box__headerbtn {
  position: absolute;
  top: 30px;
  right: 30px;
  border: none;
  background: none;
  outline: none;
}
